<template>

	<view class="container">
		<view class="MyInfo">
			<view class="userPicImg">
				<!-- <image :src="himg" mode="scaleToFill"></image> -->
				<image src="/static/image/juxing.png" mode="scaleToFill"></image>
			</view>
			<view class="MyInfo-text">
				<text style="font-size: 36rpx;">{{cTime}}{{hname}}</text>
				<text style="font-size: 24rpx;color: #808080;">欢迎阅读使用帮助</text>
			</view>
		</view>

		<view class="boxs">
			<view class="box" v-for="(item,index) in helplist" :class="{'line':index%2 != 1}">
				<navigator class="nav" :url="item.herf" open-type="navigate">
					<view class="icon-box" :style="'background-color:'+item.bg">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="title-box">
						<text class="title">{{item.title}}</text>
						<text class="subtitle">{{item.subtitle}}</text>
					</view>
				</navigator>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				helplist: [{
					'image': "/static/image/helpicon/password.png",
					'title': "登录密码",
					"subtitle": "如何修改密码",
					"herf": "/pages/user/help/help-ChangePassWord/help-ChangePassWord",
					"bg": "#01F96D"
				}, {
					'image': "/static/image/helpicon/metercheck.png",
					'title': "添加抄表",
					"subtitle": "添加抄表服务",
					"herf": "/pages/user/help/help-AddMeterCheck/help-AddMeterCheck",
					"bg": "#E3FFE0"
				}, {
					'image': "/static/image/helpicon/metercheck.png",
					'title': "抄表查询",
					"subtitle": "如何查询费用信息",
					"herf": "/pages/user/help/help-SearchMeterCheck/help-SearchMeterCheck",
					"bg": "#E3FFE0"
				}, {
					'image': "/static/image/helpicon/visitingRegistration.png",
					'title': "来访登记",
					"subtitle": "如何添加来访登记人",
					"herf": "/pages/user/help/help-AddVisitingRegistration/help-AddVisitingRegistration",
					"bg": "#FFB501"
				}, {
					'image': "/static/image/helpicon/visitingRegistration.png",
					'title': "来访登记",
					"subtitle": "如何查询登记人的信息",
					"herf": "/pages/user/help/help-ScreenVisitingRegistration/help-ScreenVisitingRegistration",
					"bg": "#FFB501"
				}, {
					'image': "/static/image/helpicon/visitingRegistration.png",
					'title': "来访登记",
					"subtitle": "如何筛选登记人的信息",
					"herf": "/pages/user/help/help-SearchVisitingRegisteration/help-SearchVisitingRegisteration",
					"bg": "#FFB501"
				}, {
					'image': "/static/image/helpicon/notice.png",
					'title': "通知推送",
					"subtitle": "接收不到推送通知",
					"herf": "/pages/user/help/help-MessagePush/help-MessagePush",
					"bg": "#06D9F7"
				}, {
					'image': "/static/image/helpicon/SmartHome.png",
					'title': "智能家居",
					"subtitle": "如何选择房间",
					"herf": "/pages/user/help/help-SelectRoom-Smart/help-SelectRoom-Smart",
					"bg": "#5272A5"
				}, {
					'image': "/static/image/helpicon/SmartHome2.png",
					'title': "智能家居",
					"subtitle": "如何添加智能家居设备",
					"herf": "/pages/user/help/help-AddSmartHome/help-AddSmartHome",
					"bg": "#5272A5"
				}, {
					'image': "/static/image/helpicon/SmartHome3.png",
					'title': "智能家居",
					"subtitle": "如何移除设备",
					"herf": "/pages/user/help/help-RemoveSmartHome/help-RemoveSmartHome",
					"bg": "#5272A5"
				}],
				date: '',
				hname: '',
				himg: '',
				cTime: '',
			}
		},
		onLoad(option) {
			// console.log(option)
			this.hname = option.username
			this.himg = option.hImg
			this.getSystemDate()
		},
		methods: {
			getSystemDate() {
				let today = new Date();
				let year = today.getFullYear()
				let month = today.getMonth() + 1;
				let day = today.getDate()
				let h = today.getHours();
				let m = today.getMinutes();
				let s = today.getSeconds(); // 在小于10的数字钱前加一个‘0’
				m = checkTime(m);
				s = checkTime(s);

				function checkTime(i) {
					if (i < 10) {
						i = "0" + i;
					}
					return i;
				}


				let temp = `${year}-${month}-${day} ${h}:${m}:${s}`
				let hour = `${h}`

				this.date = temp
				// console.log(hour)
				// for (let hour = 1; hour <= 24; hour++) {
					if (hour >= 0 && hour <= 3) {
						// console.log("晚上", hour)
						this.cTime = '晚上好,'
					} else if (hour >= 4 && hour <= 5) {
						// console.log("凌晨", hour)
						this.cTime = '注意休息,'
					} else if (hour > 5 && hour <= 8) {
						// console.log('早上好',hour)
						this.cTime = '早上好,'
					} else if (hour > 8 && hour <= 11) {
						// console.log("上午", hour)
						this.cTime = '上午好,'
					} else if (hour > 11 && hour <= 14) {
						// console.log("中午", hour)
						this.cTime = "中午好,"
					} else if (hour > 14 && hour < 17) {
						// console.log("下午", hour)
						this.cTime = "下午好,"
					} else if (hour >= 17 && hour <= 18) {
						// console.log("傍晚", hour)
						this.cTime = "傍晚好,"
					} else if (hour > 18 && hour <= 24) {
						// console.log("晚上", hour)
						this.cTime = '晚上好,'
					}
				// }
				// console.log()
			}
		}
	}
</script>

<style lang="less">
	.container {
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

		.MyInfo {
			margin: 20rpx auto;
			// border: 1px solid #FF0000;
			background-color: #FFFFFF;
			width: 90%;
			padding: 20rpx;
			display: flex;

			.MyInfo-text {
				display: flex;
				flex-direction: column;
			}

		}

		.boxs {
			margin: 0 auto;
			background-color: #FFFFFF;
			width: 90%;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;

			.box {
				// background-color: #FFFFFF;
				width: 330rpx;
				height: 100rpx;
				margin: 5rpx 0;
				// border: 1px solid #FF5A5F;
				display: flex;
				align-items: center;
			}

			.box .nav {
				// width: 180rpx;
				display: flex;
				// border: 1px solid #FF5A5F;
			}
		}
	}

	.icon-box {
		width: 80rpx;
		height: 80rpx;
		// background-color: #01F96D;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;

		image {
			width: 60%;
			height: 60%;
		}

	}

	.title-box {
		display: flex;
		flex-direction: column;

		.subtitle {
			font-size: 24rpx;
		}
	}

	// 边框元素
	.line {
		// border-right: 2rpx solid #007AFF;
		position: relative;
	}

	.line::before {
		content: " ";
		width: 2rpx;
		height: 110rpx;
		background-color: #f3f6ff;
		position: absolute;
		right: 0;
	}

	.userPicImg {
		border-radius: 6px;
		width: 102rpx;
		height: 102rpx;
		margin: 0 26rpx 0 36rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		// .userPic('userPicImg')

		image {
			border-radius: 100%;
			width: 102rpx;
			height: 102rpx;
		}
	}
</style>
